<template>
  <div>
    <!-- 添加或修改角色对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" style="margin-top:-80px;" @close="editDialogClose()">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" style="margin-top:-25px;">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称：" prop="roleName">
              <el-input v-model="form.roleName" maxlength="50" placeholder="请输入角色名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色标识：" prop="roleIdentifier">
              <el-input v-model="form.roleIdentifier" maxlength="200" placeholder="请输入角色标识" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色状态：" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="form.remark" maxlength="200" placeholder="备注信息" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="float:right;margin-bottom:-20px;">
              <el-button v-loading="dialogLoading" size="medium" type="primary" @click="submitForm">确 定</el-button>
              <el-button size="medium" type="danger" @click="editDialogClose()">取 消</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: '新增角色',
      open: false,
      dialogLoading: false,
      menuOptions: [],
      visibleOptions: [],
      form: {
        roleName: '',
        roleIdentifier: '',
        remark: '',
        status: ''
      },
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        roleIdentifier: [
          { required: true, message: '角色标识不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '角色状态不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 对话框关闭回调方法
     */
    editDialogClose() {
      this.form = {
        roleName: '',
        roleIdentifier: '',
        remark: '',
        status: ''
      }
      this.open = false
    },
    /** 对话框初始化 */
    init(id) {
      console.log(id)

      if (id) {
        this.title = '修改角色'
        this.getRoleInfo(id)
      } else {
        this.open = true
      }
    },
    /**
     * 获取菜单信息
     */
    getRoleInfo(id) {
      this.httpRequest({
        url: '/sys/role/info/' + id,
        method: 'get'
      }).then((response) => {
        if (response.code === 0) {
          this.form = response.body
          this.open = true
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    /**
     * 提交表单
     */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.dialogLoading = true
          if (this.form.id) {
            this.httpRequest({
              url: '/sys/role/update',
              method: 'post',
              data: this.form
            }).then((response) => {
              if (response.code === 0) {
                this.$message.success('角色修改成功')
                this.editDialogClose()
                this.$emit('refreshData')
              } else {
                this.$message.error(response.msg)
              }
              this.dialogLoading = false
            })
          } else {
            this.httpRequest({
              url: '/sys/role/add',
              method: 'post',
              data: this.form
            }).then((response) => {
              if (response.code === 0) {
                this.$message.success('角色新增成功')
                this.editDialogClose()
                this.$emit('refreshData')
              } else {
                this.$message.error(response.msg)
              }
              this.dialogLoading = false
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .mod-menu {
    .menu-list__input,
    .icon-list__input {
      > .el-input__inner {
        cursor: pointer;
      }
    }
    &__icon-popover {
      max-width: 370px;
    }
    &__icon-list {
      max-height: 304px;
      padding: 0;
      margin: -8px 0 0 -8px;
      > .el-button {
        padding: 8px;
        margin: 8px 0 0 8px;
        > span {
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
    }
    .icon-list__tips {
      font-size: 18px;
      text-align: center;
      color: #e6a23c;
      cursor: pointer;
    }
  }
</style>
